<template>
  <div>
    <el-container>
      <el-aside>
        <div class="fix-left" :class="showOrHide">
          <span class="left-btn" @click="onleftBtnClick">
            <i class="el-icon-tickets"></i>
          </span>
          <LeftTree :TreeData="TreeData" @onNodeClick="nodeClick"></LeftTree>
        </div>
      </el-aside>
      <!-- 用.native 获取组件的原生事件 -->
      <el-container @click.native="mainClick">
        <el-header>
          <h1>Kuner 的试验场</h1>
        </el-header>
        <el-main>
          <div>
            <MarkDownContent :HTMLContent="mdContent"></MarkDownContent>
          </div>
        </el-main>
        <el-footer >
          Kuner_Rick©2018 All Rights Reserved
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import LeftTree from "@/components/LeftTree.vue";
import MarkDownContent from "@/components/Markdown.vue";
import marked from "marked";
import hljs from "highlight.js";

export default {
  name: "Layout",
  data() {
    return {
      rootBlogPath: window.location.href + "/resource/blogs/",
      TreeData: [],
      mdContent: "",
      showOrHide: "hide"
    };
  },
  methods: {
    getConfig(_path) {
      return this.axios.get(_path).then(response => {
        return response.data;
      });
    },
    onleftBtnClick() {
      this.showOrHide = this.showOrHide === "hide" ? "" : "hide";
    },
    mainClick() {
      this.showOrHide = "hide";
    },

    toTreeData(jsonObj) {
      return new Promise((resolve, reject) => {
        var treeData = [];
        var rootPath = "";
        this.jsonToTree(jsonObj, treeData, rootPath);
        resolve(treeData);
      });
    },

    jsonToTree(jsonObj, treeData, rootPath) {
      if (jsonObj === undefined) return;
      if (jsonObj instanceof Array) {
        jsonObj.forEach(value => {
          if (typeof value === "string") {
            treeData.push({
              path: rootPath + "/" + value,
              label: value,
              type: "file"
            });
          } else if (typeof value === "object") {
            for (var val in value) {
              var foldNode = {
                path: rootPath + "/" + val,
                label: val,
                type: "fold",
                children: []
              };
              treeData.push(foldNode);
              this.jsonToTree(
                value[val],
                foldNode.children,
                rootPath + "/" + val
              );
            }
          }
        });
      }
    },

    getMdContent(_relativePath) {
      return this.axios
        .get(this.rootBlogPath + _relativePath)
        .then(response => {
          return response.data;
        });
    },

    nodeClick(data, node) {
      if (data.type === "file") {
        this.getMdContent(data.path)
          .then(mdContent => {
            this.mdContent = marked(mdContent);
          })
          .catch(e => {
            console.error(e);
          });
      }
    }
  },
  mounted() {
    hljs.initHighlightingOnLoad();
    var rendererMD = new marked.Renderer();
    marked.setOptions({
      renderer: rendererMD,
      gfm: true,
      tables: true,
      breaks: false,
      pedantic: false,
      sanitize: false,
      smartLists: true,
      smartypants: false
    });
    marked.setOptions({
      highlight: function(code) {
        return hljs.highlightAuto(code).value;
      }
    });

    this.getConfig(this.rootBlogPath + "catalog.json")
      .then(data => this.toTreeData(data))
      .then(treeData => (this.TreeData = treeData))
      .catch(e => {
        console.error(e);
      });

    // this.getConfig('./static/test.md').then(res=>{
    //  this.mdContent = marked(res);
    // })
  },
  components: {
    LeftTree,
    MarkDownContent
  }
};
</script>


<style lang="scss" scoped>
$minHeight: 900px;
$asideWidth: 300px;
$notPcAsideWidth: 0px;

h1 {
  font-size: 2rem;
}

.el-header {
  background-color: #4d85ce;
  color: #fff;
  text-align: left;
  padding: 4px 20px;
}
.el-aside {
  position: relative;
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  width: $asideWidth !important;
  .left-btn {
    background: #d7d9dbc7;
    margin-bottom: 1rem;
    padding: 4px 6px;
    font-size: 2rem;
    display: inline-block;
    position: relative;
    z-index: 1;
  }

  .fix-left {
    position: fixed;
    width: $asideWidth;
    background-color: #e9eef3;
    min-height: 100%;
    .left-btn {
      color: #969696;
      display: none;
      left: $asideWidth/2;
      transform: translate(-50%);
    }
  }
}

.el-main {
  background-color: #fff;
  color: #333;
  min-height: $minHeight;
}
.el-footer {
  text-align: center;
  line-height: 3rem;
  background-color: #e9eef3;
  border-top: solid 1px rgba(170, 170, 170, 0.788);
}

@media screen and (max-width: 760px) {
  .el-aside {
    width: $notPcAsideWidth !important;
    .fix-left,
    .left-btn {
      transition: all 0.2s ease-in-out;
    }

    .fix-left {
      position: fixed;
      width: $asideWidth;
      background-color: #e9eef3;
      min-height: 100%;
      .left-btn {
        position: relative;
        display: inline-block;
        left: $asideWidth/2;
        top: 4rem;
        font-size: 1.5rem;
        padding: 0.2rem 0;
        margin-bottom: 1.5rem;
        transform: translate(-1.2rem, -3.8rem) scale(1.4, 1);
      }
    }

    .fix-left.hide {
      transform: translateX(-100%);
      .left-btn {
        transform: translate(50%, 15rem);
      }
    }
  }
}
</style>
